<template>
  <div class="yingmoo-order">
    <ul class="nav">
      <li @click="getOrders(),setsession(1),session=1" :style='{"background-color":session==1? "#036eb7" :"","color":session==1? "white" :""}'>所有订单</li>
      <li @click="getOrdersByStatus(0,1),setsession(2),session=2" :style='{"background-color":session==2? "#036eb7" :"","color":session==2? "white" :""}'>待确认<!--<span>1</span>--></li>
      <li @click="getOrdersByStatus(1,1),setsession(3),session=3" :style='{"background-color":session==3? "#036eb7" :"","color":session==3? "white" :""}'>执行中</li>
      <li @click="getOrdersByStatus(2,1),setsession(4),session=4" :style='{"background-color":session==4? "#036eb7" :"","color":session==4? "white" :""}'>已完成</li>
      <li @click="getOrdersByStatus(4,2),setsession(5),session=5" :style='{"background-color":session==5? "#036eb7" :"","color":session==5? "white" :""}'>已取消</li>
    </ul>
    <div class="order-classify">
      <div class="time">订单时间
        <el-select v-model="value4" clearable placeholder="全部订单">
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="time">媒体分类
        <el-select v-model="value3" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
<!--  订单列表  -->
    <div class="indent-list">
      <ul class="indent-head">
        <li>媒体名称/媒体分类</li>
        <li>规格</li>
        <li>数量/排期</li>
        <li>金额</li>
        <li>流程/订单状态</li>
      </ul>
      <div v-for='order in orders'>
        <ul class="indent-num">
          <li>
            <input type="checkbox" id="num" />
            <label for="num"><span>{{order.order_create_time}} &nbsp;</span>订单编号：<span>{{order.order_num}}</span></label>
          </li>
          <li v-if="order.order_status != 4" @click="cancelOrder(order.auto_id,order.order_num,order.cart_id)">取消订单并加入购物车</li>
        </ul>
        <div class="indent-odd">
          <div class="one">
            <div class="one-div">
              <input type="checkbox" id="indent" />
              <label for="indent"><img width="180px" height="117px" :src="order.cover"/></label>
            </div>
            <div class="two-div">
              <h1>{{order.mediaName}}</h1>
              <p><span>{{order.category}}</span></p>
              <p><span>{{order.area}}</span></p>
              <p>{{order.companyName}}</p>
            </div>
          </div>
          
          <div class="two">
            <p>{{order.width}}m*{{order.height}}m</p>
          </div>
          <div class="three">
            <p>数量：{{order.buy_quantity}}</p>
            <p>{{order.start_time}} 至 {{order.end_time}}</p>
          </div>
          <div class="for">
            <p>￥{{order.prices}}{{order.light_style_id}}</p>
            <p>￥{{order.discount_price}}{{order.light_style_id}}</p>
          </div>
          <div class="five">
            <div class="five-one">
              <p v-if="order.order_status == 0">待处理</p>
              <p v-if="order.order_status == 1">处理中</p>
              <p v-if="order.order_status == 2">已完成</p>
              <p v-if="order.order_status == 4">已取消</p>
              <p @click="orderInfo(order.sonOrder_num,order.cart_id)">订单详情</p>
            </div>
            <div class="five-two">
              <el-button class="div" type="text" @click="open6(order.cart_id,order.sonOrder_num)"  v-if="order.order_status == 0">取消订单</el-button>
              <el-button type="text" @click="dialogVisible = true" class="div" v-else v-if="order.order_status == 2">查看合同</el-button>
              
              <el-dialog title="查看合同" :visible.sync="dialogVisible ">
                <div class="uploading" style="display:flex;">
                  <p class="name">合同名称合同名称合同名称合同名称合同名称.doc <span>下载</span></p>
                </div>
                <p style="margin-top:20px;line-height:38px;background-color:#f2f2f2;padding-left:15px;font-size:14px;color:#666666;">订单详情</p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">买家信息</h4>
                <p style="line-height:30px;">用户名：<span style="margin-right:30px;">long7891</span>联系电话：<span style="margin-right:30px;">13522622767</span>联系人：<span style="margin-right:30px;">唐 乐</span>公司名称：<span>北京鹰目网络科技有限公司</span></p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">卖家信息</h4>
                <p style="line-height:30px;">用户名：<span style="margin-right:30px;">long7891</span>联系电话：<span style="margin-right:30px;">13522622767</span>联系人：<span style="margin-right:30px;">唐 乐</span>公司名称：<span>北京鹰目网络科技有限公司</span></p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">订单信息</h4>
                <p style="line-height:30px;">订单编号：<span style="margin-right:70px;">ym201711271234569</span>合同上传时间：<span style="margin-right:70px;">2017-11-27 14：46：30</span>创建时间：<span style="margin-right:75px;">2017-11-17 14：46：30</span>执行时间：<span>2017-11-17 14：46：30</span></p>
              </el-dialog>
              
              <el-button type="text" @click="openUploadPanel" class="div" v-else v-if="order.order_status == 1">上传合同</el-button>
              
              <el-dialog title="上传合同" :visible.sync="dialogTableVisible">
                <div class="uploading" style="display:flex;">
                  <button class="btn">选择文件</button>
                  <input type="file" id="upload_contract" class="up_file" value="" @change="upFile"/>
                </div>
                <p style="margin-top:20px;line-height:38px;background-color:#f2f2f2;padding-left:15px;font-size:14px;color:#666666;">订单详情</p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">买家信息</h4>
                <p style="line-height:30px;">用户名：<span style="margin-right:30px;">long7891</span>联系电话：<span style="margin-right:30px;">13522622767</span>联系人：<span style="margin-right:30px;">唐 乐</span>公司名称：<span>北京鹰目网络科技有限公司</span></p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">卖家信息</h4>
                <p style="line-height:30px;">用户名：<span style="margin-right:30px;">long7891</span>联系电话：<span style="margin-right:30px;">13522622767</span>联系人：<span style="margin-right:30px;">唐 乐</span>公司名称：<span>北京鹰目网络科技有限公司</span></p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">订单信息</h4>
                <p style="line-height:30px;">订单编号：<span style="margin-right:70px;">ym201711271234569</span>合同上传时间：<span style="margin-right:70px;">2017-11-27 14：46：30</span>创建时间：<span style="margin-right:75px;">2017-11-17 14：46：30</span>执行时间：<span>2017-11-17 14：46：30</span></p>
              </el-dialog>
              <el-button type="text" @click="showMessage(order.cart_id)" class="leave-message" v-if="order.order_status == 1 || order.order_status == 0">留言</el-button>

              <el-dialog title="留言备注" :visible.sync="outerVisible">
                <div style="display:flex;" v-for="message in messageList">
                  <p style="margin-left:45px;">您</p>：
                  <p style="width:310px;margin-left:15px;">{{message.messageContent}}</p>
                  <p style="margin-left:60px;">{{message.createTime}}</p>
                </div>
                <!--<div style="display:flex;">
                  <p style="margin-left:30px;">卖方</p>：
                  <p style="width:310px;margin-left:15px;">此媒体被我选中，请帮忙核实档期此媒体被我选中</p>
                  <p style="margin-left:60px;">2017-11-20</p>
                  <p style="margin-left:40px;">11:20:30</p>
                </div>-->
                <div style="height:95px;margin-top:15px;display:flex;">
                  <h4 style="font-weight:bold;color:#333333;font-size:16px;">备注留言</h4>
                  <textarea v-model="message" style="margin-left:20px;width:610px;outline: inherit;font-size:16px;"></textarea>
                </div>
                <div class="dialog-footer" style="margin-top:20px;margin-left:85px;">
                  <el-button @click="commitMessage()" type="primary">提 交</el-button>
                </div>
                <p style="margin-top:20px;line-height:38px;background-color:#f2f2f2;padding-left:15px;font-size:14px;color:#666666;">订单详情</p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">买家信息</h4>
                <p style="line-height:30px;">用户名：<span style="margin-right:30px;">{{user.contentUser}}</span>联系电话：<span style="margin-right:30px;">{{user.mobile}}</span>联系人：<span style="margin-right:30px;">{{memberCorp.contentName}}</span>公司名称：<span>{{memberCorp.contentBody}}</span></p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">卖家信息</h4>
                <p style="line-height:30px;">用户名：<span style="margin-right:30px;">long7891</span>联系电话：<span style="margin-right:30px;">13522622767</span>联系人：<span style="margin-right:30px;">唐 乐</span>公司名称：<span>北京鹰目网络科技有限公司</span></p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">订单信息</h4>
                <p style="line-height:30px;">订单编号：<span style="margin-right:70px;">{{order.order_num}}</span>合同上传时间：<span style="margin-right:70px;">2017-11-27 14：46：30</span>创建时间：<span style="margin-right:75px;">{{order.orderCreateTime}}</span>执行时间：<span>2017-11-17 14：46：30</span></p>
              </el-dialog>
              
              <el-button type="text" @click="centerDialogVisible = true,showMessage2(order.cart_id)" class="leave-message" v-if="order.order_status == 2">查看留言</el-button>

              <el-dialog title="查看留言" :visible.sync="centerDialogVisible">
                <div style="display:flex;" v-for="message in messageList">
                  <p style="margin-left:45px;">您</p>：
                  <p style="width:310px;margin-left:15px;">{{message.messageContent}}</p>
                  <p style="margin-left:60px;">{{message.createTime}}</p>
                </div>
                <!--<div style="display:flex;">
                  <p>卖方</p>：
                  <p style="width:310px;">此媒体被我选中，请帮忙核实档期此媒体被我选中</p>
                  <p style="margin-left:60px;">2017-11-20</p>
                  <p style="margin-left:40px;">11:20:30</p>
                </div>-->
                <p style="margin-top:20px;line-height:38px;background-color:#f2f2f2;padding-left:15px;font-size:14px;color:#666666;">订单详情</p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">买家信息</h4>
                <p style="line-height:30px;">用户名：<span style="margin-right:30px;">long7891</span>联系电话：<span style="margin-right:30px;">13522622767</span>联系人：<span style="margin-right:30px;">唐 乐</span>公司名称：<span>北京鹰目网络科技有限公司</span></p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">卖家信息</h4>
                <p style="line-height:30px;">用户名：<span style="margin-right:30px;">long7891</span>联系电话：<span style="margin-right:30px;">13522622767</span>联系人：<span style="margin-right:30px;">唐 乐</span>公司名称：<span>北京鹰目网络科技有限公司</span></p>
                <h4 style="margin-top:10px;font-weight:bold;color:#333333;font-size:16px;">订单信息</h4>
                <p style="line-height:30px;">订单编号：<span style="margin-right:70px;">ym201711271234569</span>合同上传时间：<span style="margin-right:70px;">2017-11-27 14：46：30</span>创建时间：<span style="margin-right:75px;">2017-11-17 14：46：30</span>执行时间：<span>2017-11-17 14：46：30</span></p>
              </el-dialog>
            </div>
          </div>
        </div>       
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-order",
    data(){
      return{
      	requestAddr:this.GLOBAL.addr,
        centerDialogVisible: false,
        dialogTableVisible: false,
        dialogVisible:false,
        outerVisible: false,
        memberCorp:{},
        message:null,
        messageList:[],
      	user:{},
      	cartId:null,
        session: 1,
        value4: '',
        value3: '',
        option: [{
          value: '选项1',
          label: '2015年前订单'
        }, {
          value: '选项2',
          label: '2016年前订单'
        }, {
          value: '选项3',
          label: '2017年前订单'
        }],
        options: [{
          value: '选项1',
          label: '公交媒体'
        }, {
          value: '选项2',
          label: '高速媒体'
        }, {
          value: '选项3',
          label: '机场媒体'
        }, {
          value: '选项4',
          label: '地铁媒体'
        }, {
          value: '选项5',
          label: '火车媒体'
        }, {
          value: '选项6',
          label: '楼宇媒体'
        }, {
          value: '选项7',
          label: '特色区域媒体'
        }, {
          value: '选项8',
          label: '客运站媒体'
        }, {
          value: '选项9',
          label: '市区媒体'
        }, {
          value: '选项10',
          label: '商超媒体'
        }],
        text:[{
          textheadline: '媒体标题媒体标题媒体标题',
          texttype: '机场媒体',
          textfrom: '灯箱',
          textlocation: '北京',
          textplace: '海淀区',
          textname: '媒体主公司名称',
          textsize: '13m*9m',
          textdeadline: '1个月',
          texttime: '2017-11-28至2017-12-27',
          textoriginal: '￥880000.00',
          textprice: '￥880000.00',
          textstate: '平台待审',
          textdetails: '订单详情',
          textcancel: '取消订单',
          textleave: '留言'
        },{
          textheadline: '媒体标题媒体标题媒体标题',
          texttype: '机场媒体',
          textfrom: '灯箱',
          textlocation: '北京',
          textplace: '海淀区',
          textname: '媒体主公司名称',
          textsize: '13m*9m',
          textdeadline: '1个月',
          texttime: '2017-11-28至2017-12-27',
          textoriginal: '￥880000.00',
          textprice: '￥880000.00',
          textstate: '平台待审',
          textdetails: '订单详情',
          textcancel: '取消订单',
          textleave: '留言'
        }],
        orders:[],
        orderMediaData:[],
        indent:[{
          time: '2017-11-27',
          indent: 'ym201711271234569'
        },{
          time: '2017-11-27',
          indent: 'ym201711271234569'
        }]
      }
    },
    mounted(){
			this.getOrders();   
      this.getsession();
    },
    methods:{
    	commitMessage:function(){
    		if(this.message == null || (this.message).trim()==''){
    			alert("留言不可以空！");
    			return;
    		}
    		this.$http.post(this.requestAddr+"/GetJson/leaveMessage",{"cartId":this.cartId,"message":this.message},{emulateJSON:true}).then(
    			(res)=>{
						if(res.data.code == 0){
							alert("留言成功！");
							this.outerVisible = false;
						}
    			}
    		)
    	},
    	openUploadPanel(){
				    		
    		dialogTableVisible = true;
    	},
    	showMessage:function(cartId){
    		this.cartId = cartId;
    		this.$http.post(this.requestAddr+"/GetJson/getMessageList",{"id":cartId},{emulateJSON:true}).then(
    			(res)=>{
    				this.messageList = res.data.messageList;
    			}
    		);
    		this.message = null;
    		this.outerVisible = true;
    	},
    	showMessage2:function(cartId){
    		this.$http.post(this.requestAddr+"/GetJson/getMessageList",{"id":cartId},{emulateJSON:true}).then(
    			(res)=>{
    				this.messageList = res.data.messageList;
    			}
    		);
    	},
    	getOrders:function(){
				this.user = JSON.parse(localStorage.getItem("user"));
				this.$http.post(this.requestAddr+"/GetJson/getMemberCorpInfo",{"memberId":this.user.autoId},{emulateJSON:true}).then(
					(res)=>{
						this.memberCorp = res.data.memberCorp;
					}
				);	
				this.$http.post(this.requestAddr+"/GetJson/getOrders",this.user,{emulateJSON:true}).then(
					(res)=>{
						this.orders = res.data.orders;
						for(var i=0; i<(this.orders).length; i++){
							if((this.orders[i].start_time)!=null && typeof(this.orders[i].start_time)!='undefined'){
								var startTime = (this.orders[i].start_time).toString();
								var endTime = (this.orders[i].end_time).toString();
								this.orders[i].start_time = startTime.substring(0,10);
								this.orders[i].end_time = endTime.substring(0,10);
							}
            }
					}
				)
    	},
    	getOrdersByStatus:function(statu,cartStatu){
    		this.$http.post(this.requestAddr+"/GetJson/getOrdersByStatus",{"memberId":this.user.autoId,"status":statu,"cartStatus":cartStatu},{emulateJSON:true}).then(
    			(res)=>{
    				this.orders = res.data.orderList;
    				for(var i=0; i<(this.orders).length; i++){
            	if((this.orders[i].start_time)!=null && typeof(this.orders[i].start_time)!='undefined'){
								var startTime = (this.orders[i].start_time).toString();
								var endTime = (this.orders[i].end_time).toString();
								this.orders[i].start_time = startTime.substring(0,10);
								this.orders[i].end_time = endTime.substring(0,10);
							}
            }
    			}
    		)
    	},
    	/*取消订单并加入购物车*/
    	cancelOrder:function(id,orderNum,cartId){
    		this.$confirm('确认取消该订单吗？','提示', {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning'
	      }).then(
	      	()=>{
	      		this.$http.post(this.requestAddr+"/GetJson/cancelOrder",{"autoId":id,"orderNum":orderNum,"cartId":cartId},{emulateJSON:true}).then(
    				(res)=>{
    					this.getOrders();
    				})
	      	}
	      )
    	},
    	/*取消单个子订单*/
      open6(id,orderNum) {
        this.$confirm('确定要取消该订单吗？', '订单取消', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning' 
        }).then(
        	()=>{
        		this.$http.post(this.requestAddr+"/GetJson/delOrderMedia",{"cartId":id,"orderNum":orderNum},{emulateJSON:true}).then(
        			(res)=>{
        				if(res.data.code == 0){
        					this.getOrders();
        				}
        			}
        		)
        	}
        )
      },
      setsession: function(odd) {
        window.sessionStorage.setItem('odd', odd)
      },
      getsession: function() {
        this.curr = window.sessionStorage.getItem('odd')
      },
      orderInfo(num,cartId){
      	console.log(num)
      	sessionStorage.setItem("orderNum",num);
      	sessionStorage.setItem("cartId",cartId)
      	window.location.href = "../#/ymMemberindent"
      },
      //上传合同
      upFile(){
      	var file = document.getElementById("upload_contract").files[0];
      	var formData = new FormData();
      	formData.append("file",file);
      	console.log("*******************")
      	console.log(formData)
      	console.log(file)
      	console.log("*******************")
      }
    }
  }

</script>
<style scoped>

  .el-select {
    margin-left: 15px;
  }

  .el-input__inner {
    background-color: white;
    color: #999999;
    border: none;
    border: 1px solid #dddddd;
    margin-left: 10px;
  }
</style>
<style scoped>
  .el-dialog--center{
    width: 1100px !important;
  }
</style>
<style scoped lang="less">
  .yingmoo-order {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 84px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #036eb7;
          color: white;
        }
        span {
          color: #f29600;
        }
      }
    }
    .order-classify {
      width: 1200px;
      height: 90px;
      margin: 0 auto;
      background-color: white;
      display: flex;
      align-items: center;
      div {
        line-height: 40px;
      }
      .time {
        margin-left: 30px;
      }
    } 
    .indent-list{
      width: 1200px;
      margin: 0 auto;
      background-color: white;
      .indent-head{
        width: 1200px;
        height: 42px;
        font-size: 16px;
        display: flex;
        background-color: #f2f2f2;
        li{
          text-align: center;
          line-height: 42px;
          color: #666666;
          &:nth-child(1){
            width: 473px;
          }
          &:nth-child(2){
            width: 132px;
          }
          &:nth-child(3){
            width: 192px;
          }
          &:nth-child(4){
            width: 120px;
          }
          &:nth-child(5){
            width: 279px;
          }
        }
      }
      .indent-num{
        display: flex;
        justify-content: space-between;
        padding-left: 22px;
        padding-right: 33px;
        font-size: 14px;
        line-height: 42px;
        border-bottom: 2px solid #1578bc;
        li{
          &:nth-child(2){
            color: #999999;
            cursor: pointer;
            &:hover{
              color: #f39e26;
            }
          }
        }
      }
      .indent-odd{
        display: flex;
        height: 142px;
        border-bottom: 1px solid #f2f2f2;
        .one{
          width: 473px;
          display: flex;
          align-items: center;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          .one-div{
            display: flex;
            align-items: center;
            input{
              margin-left: 25px;
            }
            label{
              margin-left: 10px;
            }
          }
          .two-div{
            width: 185px;
            font-size: 14px;
            line-height: 32px;
            padding-left: 30px;
            h1{
              font-weight: bold;
              margin-top: 10px;
              white-space:nowrap;
						  overflow:hidden;
						  text-overflow:ellipsis;
            }
            p{
              color: #999999;
              white-space:nowrap;
						  overflow:hidden;
						  text-overflow:ellipsis;
            }
          }
        }
        .two{
          width: 132px;
          line-height: 142px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p{
            color: #999999;
            font-size: 14px;
            text-align: center;
          }
        }
        .three{
          width: 192px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p{
            width: 100%;
            font-size: 14px;
            color: #999999;
            text-align: center;
            &:nth-child(1){
              margin-top: 33px;
              line-height: 50px;
            }
          }
        }
        .for{
          width: 120px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p{
            text-align: center;
            &:nth-child(1){
              text-decoration: line-through;
              color: #999999;
              margin-top: 33px;
              line-height: 50px;
            }
            &:nth-child(2){
              color: #f39e26;
              font-weight: bold;
            }
          }
        }
        .five{
          width: 279px;
          display: flex;
          justify-content: space-between;
          .five-one{
            padding-left: 30px;
            text-align: center;
            p{
              cursor: pointer;
              &:nth-child(1){
                width: 100px;
                color: #999999;
                margin-top: 43px;
                line-height: 30px;
                border-bottom: 1px solid #999999;
                &:hover{
                  color: #f39e26;
                }
              }
              &:nth-child(2){
                color: #999999;
                line-height: 30px;
                &:hover{
                  color: #f39e26;
                }
              }
            }
          }
          .five-two{
            .div{
              width: 73px;   
              height: 23px;
              border-radius: 3px;
              text-align: center;
              cursor: pointer;
              font-size: 16px;
              padding: 0;
              color: #036eb7;
              border: 1px solid #036eb7;
              margin-top: 42px;
              margin-left: 30px;
              &:hover{
                border: 1px solid #f39e26;
                color: #f39e26;
              }
            }
            .uploading{
              .btn{
                width: 100px;   
                height: 30px;
                border-radius: 3px;
                text-align: center;
                background-color: #dddddd;
                border: none;
                color: #999999;
                font-size: 14px;
                outline: inherit;
                margin-right: 15px;
              }
              .up_file{
              	position: absolute;
              	z-index: 1000;
              	width: 100px;   
                height: 30px;
                opacity: 0;
              }
              .name{
                line-height: 30px;
                font-size: 15px;
                color: #333333;
                span{
                  margin-left: 20px;
                  color: #f29600;
                  font-weight: bold;
                }
              }
            }
            .leave-message{
              width: 73px;
              height: 23px;
              color: #036eb7;
              border: 1px solid #036eb7;
              padding: 0;
              font-size: 16px;
              margin-top: 10px;
              margin-left: 30px;
              &:hover{
                border: 1px solid #f39e26;
                color: #f39e26;
              }
            }
          }
        }
      }
    }
  }

</style>
